<template>
    <div>
        <NavTop></NavTop>
        <div class="common-layout">
            <el-container>
                <el-aside width="200px"><NavLeft @handle="dadHandle" /></el-aside>
            <el-container>
                <el-header><MySwiper/></el-header>
                <el-main><MyList :list="goods" /></el-main>
            </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
import NavTop from '../../components/NavTop.vue'
import MyList from './components/MyList.vue';
import MySwiper from './components/MySwiper.vue';
import NavLeft from './components/NavLeft.vue';
import axios from 'axios';

export default {
    components:{
        NavTop,
        MyList,
        MySwiper,
        NavLeft,
    },
    mounted(){
        axios.get('goodslist.json').then(res=>{
            this.list = res.data.goodslist
            this.goods = this.list
        })
        
    },
    data() {
        return {
            list:[],
            goods:[]
        }
    },
    methods: {
        dadHandle(val){
            this.goods = this.list.filter(v => v.cid ==val)
        }
    },
}

</script>
<style>
.el-header{
    --el-header-padding:0 !important;
    height: 150px !important;
}
</style>